/**************************************************************************************** Import */
import React, { Component } from "react";
import { View, Text } from "react-native";
import * as Animatable from 'react-native-animatable';

/**************************************************************************************** Variable */
// 隐藏时的宽高
const sizeShow = {width: 150, height: 150};

// 显示时的宽高
const sizeHide = {width: 0, height: 0};

/**************************************************************************************** Class */
export default class Layer extends Component {
    constructor(props) {
        super(props);
        this.status = 'hide';
        this.state = {
            opacity: 0,
            width: sizeHide.width,
            height: sizeHide.height
        }
    }

    /**
     * 获取ref，注意：此处只能用这个函数设置ref，否则获取出来的对象没有transitionTo方法
     */
    setref = (ref)=> {
        this.animate = ref;
    }

    /**
     * 显示
     */
    show() {
        this.status = 'show';
        this.setState({
            width: sizeShow.width,
            height: sizeShow.height
        }, ()=> {
            this.animate.transitionTo({ opacity: 0.8 });
            const timer = setTimeout(()=> {
                this.hide();
                clearTimeout(timer);
            }, 2000);
        });
    }

    /**
     * 隐藏
     */
    hide() {
        this.status = 'hide';
        this.animate.transitionTo({ opacity: 0 });
    }

    /**
     * 变换结束后的动画
     */
    onTransitionEnd = ()=> {
        if (this.status == 'show') return;
        this.setState({
            width: sizeHide.width,
            height: sizeHide.height
        });
    }

    /**
     * 渲染
     */
    render() {
        return (
            <Animatable.View 
                ref={this.setref} 
                duration={600} 
                onTransitionEnd={this.onTransitionEnd}
                style={[styles, {width: this.state.width, height: this.state.height}]}>
                <Text style={{color: '#fff'}}>123ffefe</Text>
            </Animatable.View>
        );
    }
}

/**
 * 样式
 */
const styles = {
    backgroundColor: '#000',
    opacity: 0, 
    color: '#fff', 
    position : 'absolute', 
    borderRadius: 4,
    top: 100, 
    left: 100
}
